<script>
export default {
  props: {
    question: {
      type: Object,
      default: { "title": "请输入题目", "type": "scoreQuestion", "choices": [], "answer": [], 'hasStandardAnswer': false, "analysis": "解析...", "userAnswer": [] },
    },
    index: {
      type: Number,
      default: 0
    },
    mode: {
      type: String,
      default: 'edit'
    },
  },
  data() {
    return {
      index2Char: ["A", "B", "C", "D", "E", "F", "G", "H", 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
      imgBaseURL: import.meta.env.VITE_DOWNFILE_API_BASE_URL,
      VITE_UPLOAD_API_BASE_URL:import.meta.env.VITE_UPLOAD_API_BASE_URL,
    }
  },
  methods: {
    addChoice() {
      console.log(this.question)
      this.question.choices.push({ "title": "选项一", "score": 0 })
    },
    deleteChoice(index) {
      this.question.choices.splice(index, 1)
    },
    deleteQuestion(index) {
      this.$emit("deleteQuestion", index);
    },
    uploadFileSucess(response) {
      if (response.code != 200) {
        ElMessage.error('文档上传失败')
      } else {
        console.log(response)
        this.question.addon = this.question.addon.concat(response.data)
      }
    },
  }
}

</script>

<template>
  <div style="padding: 10px;">
    <el-form label-position="top"  :disabled="mode=='review'">

      <div v-if="mode == 'edit'" style='width:100%'>
        <div style="display: flex;justify-content: space-between;padding: 10px 0px;">
          <div class="label">打分题</div>
          <div>
            <el-button size="small" type="danger" link @click="deleteQuestion(index)"><el-icon>
                <CloseBold />
              </el-icon></el-button>
          </div>
        </div>
      </div>
      <el-form-item label="">

        <div v-if="mode == 'edit'" style='width:100%'>
          <el-input v-model="question.title">
            <template #prepend><strong> No. {{ index + 1 }}</strong></template>
            <!-- <template #append>
              <div v-if="question.type == 'scoreQuestion'">打分题</div>
            </template> -->
          </el-input>
        </div>
        <div v-else>
          <strong> No. {{ index + 1 }}</strong> {{ question.title }}
          <div>
            <div v-if="question?.addon?.length > 0">
                <el-image :src="imgBaseURL + a.url" :zoom-rate="1.2" :max-scale="2"
                  :min-scale="0.2" style="width: 100px; height: 100px;padding:2px"  v-for="a in question.addon"
                  :preview-src-list="question.addon.map((i) => { return imgBaseURL + i.url })"
                  :initial-index="0" fit="cover" />
            </div>
          </div>
        </div>
      </el-form-item>

      <el-form-item label="打分">
        <el-alert title="分值越高，越认可题目观点" type="info" show-icon :closable="false" size="small" />
        <el-slider v-model="question.userAnswer" :step="1" show-stops :min="0" :max="10" />
      </el-form-item>

      <el-form-item label="" v-if="mode == 'edit'">
        <div>
          <el-popover trigger="click" width="300" icon-color="#626AEF" title="设置题目或答案解析" @cancel="onCancel">
            <template #reference>
              <el-button size="small" plain type="primary"><el-icon style="margin-right: 4px">
                  <Setting />
                </el-icon>设置解析</el-button>
            </template>
            <el-form label-position="top">
              <el-form-item label="是否有标准答案">
                <el-switch v-model="question.hasStandardAnswer" active-text="是" inactive-text="否"></el-switch>
              </el-form-item>
              <el-form-item label="标准答案" v-if="question.hasStandardAnswer">
                <el-alert title="分值越高，越正向" type="info" show-icon :closable="false" />
                <el-slider v-model="question.answer" :step="1" show-stops :min="0" :max="10" />
              </el-form-item>
              <el-form-item label="解析">
                <el-input type="textarea" v-model="question.analysis" placeholder="请输入题目解析" />
              </el-form-item>
              <!-- <el-form-item label="">
                <div style="text-align: right;">
                  <el-button type="primary">保存</el-button>
                </div>
              </el-form-item> -->
            </el-form>
          </el-popover>
        </div>
        <div style="margin-left: 10px;">
          <el-popover trigger="click" width="300" icon-color="#626AEF" title="上传附件" @cancel="onCancel">
            <template #reference>
              <el-button size="small" plain type="warning"><el-icon style="margin-right: 4px">
                  <Setting />
                </el-icon>上传附件</el-button>
            </template>
            <el-upload drag :action="VITE_UPLOAD_API_BASE_URL" :on-success="uploadFileSucess"
              :show-file-list="true" name="fileList" accept=".jpg, .png, .bpm">
              <el-icon class="el-icon--upload"><upload-filled /></el-icon>
              <div class="cm-upload-text">
                点击或拖动图像附件到此处上传
              </div>
              <div class="el-upload__tip">
                支持 .jpg, .png, .bpm 类型
              </div>
            </el-upload>
          </el-popover>


        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<style scoped>
:deep(.el-radio-group) {
  display: block;
}

:deep(.el-radio) {
  display: block;
}

</style>
